<!-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>Hello React</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <h2>test</h2>
        
        <div id="component1">

        </div>
        
        <div id="component2">

        </div>
        
        <script type="text/jsx">
            ////////////////////////////////////////
            // DEFINE COMPONENTS
            
            var CommentList = React.createClass({
                render: function() {
                    return (
                        <ol>
                            <li>cmt1</li>
                            <li>cmt2</li>
                        </ol>
                    );
                }
            });
            
            var CommentForm = React.createClass({
                render: function() {
                    return (
                        <form method="post">
                            <input type="text" id="comment" name="comment_text" />
                            <input type="submit" value="Send" />
                        </form>
                    );
                }
            });
            
            ////////////////////////////////////////
            // RENDER
            
            React.render(
              <CommentList />,
              document.getElementById('component1')
            );
            
            React.render(
              <CommentForm />,
              document.getElementById('component2')
            );
            
        </script>
    </body>
</html>